<template>
	<view>
		<radio-group class="block" @change="RadioChange">

			<view class="cu-form-group">
				<view class="title">{{i18n.set.realtype}}</view>
				<view>
					<radio class='margin-left-sm' :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false"
						value="1"></radio>
					{{i18n.set.idcard}}
					<radio class=' margin-left-sm' :class="radio=='2'?'checked':''" :checked="radio=='2'?true:false"
						value="2"></radio>
					{{i18n.set.passport}}
				</view>
			</view>
		</radio-group>
		<view style="margin: 10px;">
			<view class="cu-form-group t-t1">
				<view class="title"> {{i18n.set.realname}}</view>
			</view>
			<view class="cu-form-group t-t2">
				<input class="text" :placeholder="i18n.set.inputrealname" v-model="form.realname"></input>
			</view>
		</view>
		<view style="margin: 10px;" v-if="radio ==1">
			<view class="cu-form-group t-t1">
				<view class="title">{{i18n.set.idnum}}</view>
			</view>
			<view class="cu-form-group t-t2">
				<input class="number" :placeholder="i18n.set.inputidnum" v-model="form.idcard"></input>
			</view>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">	{{i18n.set.realname}}</view>
			<input class="text" :placeholder="i18n.set.inputrealname" v-model="form.realname"></input>
		</view> -->
		<!-- <view class="cu-form-group" v-if="radio ==1">
			<view class="title">{{i18n.set.idnum}}</view>
			<input class="number" :placeholder="i18n.set.inputidnum" v-model="form.idcard"></input>
		</view> -->

		<view class=" grid grid-square col-2 padding-sm bg-white" v-if="radio ==1">
			<view class="padding-sm">

				<view class=" text-center flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" style="height: 83px;"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1" style="height: 83px;">
						<text class='cuIcon-cameraadd ' style="font-size: xx-large;"></text>
					</view>
				</view>
				<view class="padding-sm">
					{{i18n.set.inputA}}
				</view>
			</view>
			<!-- <view class="padding-sm">
				<image src="@/static/722/idcard1.png" style="height: 83px;border-radius: 10px;"></image> 
				<view class="">
					{{i18n.set.example}}
				</view>
			</view> -->

			<view class="padding-sm">

				<view class=" text-center ">
					<view class="bg-img" v-for="(item,index) in imgList2" :key="index" @tap="ViewImage2"
						:data-url="imgList2[index]">
						<image :src="imgList2[index]" style="height: 83px;"></image>
						<!-- <view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
							<text class='cuIcon-close'></text>
						</view> -->
					</view>
					<view class="solids" @tap="ChooseImage2" v-if="imgList2.length<1" style="height: 83px;">
						<text class='cuIcon-cameraadd ' style="font-size: xx-large;"></text>
					</view>
				</view>
				<view class="padding-sm">
					{{i18n.set.inputB}}
				</view>
			</view>
			<!-- <view class="padding-sm">
				<image src="@/static/722/idcard2.png" style="height: 83px;border-radius: 10px;"></image>
				 <view class="">
					{{i18n.set.example}}
				</view>
			</view> -->


		</view>

		<view class=" grid grid-square col-2 padding-sm bg-white" v-if="radio ==2">
			<view class="padding-sm">

				<view class=" text-center  ">
					<view class="bg-img" v-for="(item,index) in imgList3" :key="index" @tap="ViewImage3"
						:data-url="imgList3[index]">
						<image :src="imgList3[index]" style="height: 83px;"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg3" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage3" v-if="imgList3.length<1" style="height: 83px;">
						<text class='cuIcon-cameraadd ' style="font-size: xx-large;"></text>
					</view>
				</view>
				<view class="padding-sm">
					{{i18n.set.inputpassport}}
				</view>
			</view>
			<!-- <view class="padding-sm">

				<image src="@/static/idcard3.png" style="height: 83px;border-radius: 10px;"></image>
				<view class="">
					{{i18n.set.example}}
				</view>
			</view> -->

		</view>

		<view class="cu-form-group">
			<view class="padding flex flex-direction " style="width: -webkit-fill-available;">
				<button class="cu-btn bg-yellow lg" @click="confirm">{{i18n.set.confirm}}</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				imgList: [],
				imgList2: [],
				imgList3: [],
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				form: {
					realname: '',
					idcard: '',
					card1: '',
					card2: '',
					card3: '',
					is_sm: '2'
				},
				radio: '1'
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.i18n.set.realtitleL
			});
		},
		methods: {
			...mapActions(['getUserinfo']),
			...mapMutations(['SAVE_USERINFO']),
			RadioChange(e) {
				this.radio = e.detail.value
			},
			switchChange(e) {
				this.form.is_default = e.detail.value ? 1 : 0;
			},
			ChooseImage() {
				console.log(this.$host)
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList.push(res.tempFilePaths[0]);
									this.form.card1 = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm3,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.form.card1 = '';
						}
					}
				})
			},
			ChooseImage2() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList2.push(res.tempFilePaths[0]);
									this.form.card2 = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage2(e) {
				uni.previewImage({
					urls: this.imgList2,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg2(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm2,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList2.splice(e.currentTarget.dataset.index, 1);
							this.form.card2 = '';
						}
					}
				})
			},
			ChooseImage3() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList3.push(res.tempFilePaths[0]);
									this.form.card3 = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage3(e) {
				uni.previewImage({
					urls: this.imgList3,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg3(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm2,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList3.splice(e.currentTarget.dataset.index, 1);
							this.form.card3 = '';
						}
					}
				})
			},
			//提交
			confirm() {
				if (!this.form.realname) {
					this.$api.msg(this.i18n.set.inputrealname);
					return;
				}
				if (this.radio == '1') {
					if (!this.form.idcard) {
						this.$api.msg(this.i18n.set.inputidnum);
						return;
					}
					// if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idcard))) {
					// 	this.$api.msg(this.i18n.set.err1);
					// 	return;
					// }
					if (!this.form.card1) {
						this.$api.msg(this.i18n.set.inputA);
						return;
					}
					if (!this.form.card2) {
						this.$api.msg(this.i18n.set.inputB);
						return;
					}
				} else {
					if (!this.form.card3) {
						this.$api.msg(this.i18n.set.inputpassport);
						return;
					}
				}
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userinfo.mobile))) {
				// 	this.$api.msg('请输入正确的手机号码');
				// 	return;
				// } 

				if (this.form.needcode == 1) {
					this.form.mobile = this.userinfo.mobile;
					if (!this.form.code) {
						this.$api.msg(this.i18n.login.verification);
						return;
					}
				}

				this.$http.post('user.info.edit', this.form).then(res => {
					uni.showToast({
						title: this.i18n.popup.success
					})
					this.SAVE_USERINFO(res.data)
					setTimeout(() => {
						this.$api.prePage()
					}, 800)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
	}
</style>
